import * as THREE from 'three'
import createApp from '../../core'

/**
 * 点云生成的粒子系统比精灵生成的性能要好，因为它们是一个整体，只能有一个material
 */

function createPoints (dom: HTMLElement) {
  const { camera, scene } = createApp(dom)

  camera.position.set(-150, 100, 120)
  camera.lookAt(scene.position)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const geo = new THREE.BufferGeometry()
  const material = new THREE.PointsMaterial({
    color: 0xffffff,
    vertexColors: true
  })
  const vectors = []
  const colors = []

  for (let y = -30; y < 30; y++) {
    for (let z = -30; z < 30; z++) {
      for (let x = -30; x < 30; x++) {
        vectors.push(x * 5, y * 5, z * 5)
        const color = new THREE.Color(Math.random() * 0xffffff)
        colors.push(color.r, color.g, color.b)
      }
    }
  }

  geo.setAttribute('position', new THREE.Float32BufferAttribute(vectors, 3))
  geo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3))

  const mesh = new THREE.Points(geo, material)
  scene.add(mesh)
}

export {
  createPoints
}
